<script setup lang="ts">
import { ref, defineProps, onMounted, computed, reactive } from "vue";
import { useCssVar } from "@vueuse/core";

const char_map = [
  [1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1], // 0
  [0, 1, 0, 1, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0], // 1
  [1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1], // 2
  [1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1], // 3
  [1, 0, 1, 1, 0, 1, 1, 1, 1, 0, 0, 1, 0, 0, 1], // 4
  [1, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 1], // 5
  [1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1], // 6
  [1, 1, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1], // 7
  [1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1], // 8
  [1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1], // 9
  [0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0], // :
];

const empty_map=new Array(15).fill(0)
const current_map=ref(empty_map)

const props = defineProps({
  columns: {
    type: Number,
    default: 3,
    validator: (val) => (val as Number) > 0,
  },
  rows: {
    type: Number,
    default: 5,
    validator: (val) => (val as Number) > 0,
  },
  dotSize: {
    type: Number,
    default: 20,
    validator: (val) => (val as Number) > 0,
  },
});

const container = ref<HTMLElement>();
const dots=ref<HTMLElement[]>()

const css_rows = useCssVar("--rows", container);
const css_columns = useCssVar("--columns", container);

const container_style = computed(() => {
  let row_gap = Math.ceil(props.dotSize / 2);
  let col_gap = Math.ceil(props.dotSize / 2);
  return {
    width: props.columns * (col_gap + props.dotSize) - col_gap + "px",
    height: props.rows * (row_gap + props.dotSize) - row_gap + "px",
    "grid-template-columns": `repeat(${props.columns},1fr)`,
    "grid-template-rows": `repeat(${props.rows},1fr)`,
  };
});

const dot_count = computed(() => dots.value?.length??0);

onMounted(() => {
  console.log(dot_count.value);
  css_rows.value = props.rows.toString();
  css_columns.value = props.columns.toString();
  // for (let index = 0; index < dot_count.value; index++) {
  //     let dot=document.createElement('span')
  //     dot.className='dot'
  //     container.value?.append(dot)
  // }
});

const change_color = (e: HTMLElement) => {
  let r = e.classList.toggle("active");
  // e.style.backgroundColor=!r?'white':'lightblue'
};

const update=(n:number)=>{

}

const reset = () => {
  document.querySelectorAll(".dot").forEach((dot) => dot.classList.remove("active"));
};

const print = () => {
  let matrix: number[] = [];
  let dots = document.querySelectorAll(".dot").forEach((dot) => {
    if (dot.classList.contains("active")) {
      matrix.push(1);
    } else {
      matrix.push(0);
    }
  });
  console.log(matrix);
};
</script>

<template>
  <div class="matrix" ref="container" :style="container_style">
    <!-- <p v-for="r in rows" :key="r" class="dot-row">
            <span v-for="c in columns" :key="c" class="dot"></span>        
        </p> -->
    <span
      v-for="i in dot_count"
      :key="i"
      class="dot"
      ref="dots"
      :class="{active:current_map[i]}"
    ></span>
  </div>
  <button @click="reset">reset</button>
  <button @click="print">print</button>
</template>

<style>
.matrix {
  padding: 0;
  margin: 0;
  display: grid;
  align-items: center;
  /* justify-content: center; */
  justify-items: center;
  /* grid-template-columns: repeat(var(--columns),1fr);
    grid-template-rows: repeat(var(--rows),1fr); */
  outline: 1px solid red;
  --dot-size: 20;
  --columns: 4;
  --rows: 5;
}
.dot-row {
  display: grid;
  width: auto;
  height: auto;
  padding: 5px;
  outline: 1px solid plum;
}
.matrix .dot {
  border-radius: 50%;
  width: calc(var(--dot-size) * 1px);
  height: calc(var(--dot-size) * 1px);
  border: 1px solid black;
  transition:all 0.3s ease-in;
}
.matrix .dot.active {
  background-color: aqua;
  transition: all .3s ease-out;
}
</style>
